<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <script src="./bootstrap/js/jquery.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <title>联系我们</title>
    <style>
        .title {
            position: absolute;
            top: 5px;
            left: 40px;
        }

        .title div {
            color: rgb(255, 89, 98);
        }

        .transition {
            text-align: center;
            margin: 15px 0;
        }

        .map {
            width: 70vw;
            margin-left: 15vw;
        }

        span.small {
            font-size: 18px;
            line-height: 40px;
        }

        span.big {
            font-size: 23px;
        }

        .server {
            margin: 10px 30px;
        }

        .footer {
            width: 100vw;
        }
        
    </style>
</head>

<body>

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/logo_95op_ji4i.png" alt="">
                <div class="title">
                    <div>XX甜品</div>
                    <div>SWEET</div>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">公司简介</a>
                    </li>
                    <li>
                        <a href="#">新闻动态</a>
                    </li>
                    <li>
                        <a href="#">美食甜品</a>
                    </li>
                    <li>
                        <a href="#">用户留言</a>
                    </li>
                    <li>
                        <a href="#">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div id="myCarousel" class="carousel slide" data-interval>
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/banner_3p2r.jpg" alt="First slide">
            </div>
            <div class="item">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/banner_3p2r.jpg" alt="Second slide">
            </div>
            <div class="item">
                <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/banner_3p2r.jpg" alt="Third slide">
            </div>
        </div>
    </div>
    <div class="transition">
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/oj7x_meitu_1_dugf.png" alt="">
        <span>　联系我们　</span>
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/oj7x.png" alt="">
    </div>
    <div>
        <div class="row">
            <div class="col-lg-4 col-xs-10">
                <img class="map" src="./map.png" alt="">
            </div>

        </div>
        <div class="row">
            <div class="col-lg-2 col-xs-10">
                <span class="small">能吃者
                    <span class="big">得到</span>一份暖胃的</span>
                <span class="big">享受</span>
            </div>
        </div>
    </div>
    <div class="server container">
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/us_03_47a2.png" alt="">
        <span>服务热线：021-123456x8</span>
    </div>
    <div class="container server">
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/us_07_kenw.png" alt="">
        <span>联系人：某先生</span>
    </div>
    <div class="container server">
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/us_10_4x1b.png" alt="">
        <span>公司邮箱：moumou@xxxx.com</span>
    </div>
    <div class="container server">
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/us_12_2lv2.png" alt="">
        <span>公司传真：021-123456x8</span>
    </div>
    <div class="container server">
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/us_15_b70u.png" alt="">
        <span>邮政编码：200000</span>
    </div>
    <div class="container server">
        <img src="http://tpl-cab4d6b.pic-tpl.websiteonline.cn/upload/us_19_c66c.png" alt="">
        <span>公司地址：上海市xx区xx路xx号</span>
    </div>
    <div>
        <img class="footer" src="./footer.png" alt="">
    </div>




</body>

</html>